<template>
  <div class="container">
    <i class="fas fa-chevron-left" @click="reduce"></i>
    <img class="ads-img" :src="$api+img.split('||')[index]" alt="">
    <i class="fas fa-chevron-right" @click="plus"></i>
  </div>
</template>
<style lang="less" scoped>
  @import url('../style/mixin.less');
  .container {
    width: 530px;
    height: 420px;
    .On-xs( {
      width: 100%;
      height: 160px;
      position: relative;
      float: left;
    }
    );
    .ads-img {
      width: 420px;
      height: 420px;
      float: left;
      .On-xs( {
        width: 100%;
        height: 160px;
      }
      );
    }
    .fas {
      float: left;
      font-size: 20px;
      line-height: 420px;
      padding-left: 40px;
      padding-right: 0;
      width: 15px;
      &:first-child {
        padding-right: 40px;
        padding-left: 0;
      }
      .On-xs( {
        font-size: 14px;
        line-height: 160px;
        width: 8px;
        position: absolute;
        right: 10px;
        &:first-child {
          right: unset;
          left: 10px;
        }
      }
      );
    }
  }

</style>
<script>
  export default {
    data() {
      return {
        index: 0
      }
    },
    props: {
      img: {
        required: true,
        type: Object
      }
    },
    methods: {
      /**
       * @function 下一张图片
       */
      plus: function () {
        if (this.index < this.img.split('||').length - 1) {
          this.index++
        } else {
          this.index = 0
        }
      },
      /**
       * @function 上一张图片
       */
      reduce: function () {
        if (this.index > 0) {
          this.index--
        } else {
          this.index = this.img.split('||').length - 1
        }
      }
    }
  }

</script>
